<template>
  <div class="new">
    <div class="flex">
      <SettingInput :titleFontSize="18" v-model="data.name" :title="'Name'" :placeholder="''" class="ipt" style="width: 40%"/>
      <n-button type="error"  style="width: 40%">DELETE</n-button>
    </div>
    <div class="flex">
      <SettingInput :titleFontSize="18" v-model="data.MasterHost" :title="'Master Host'" :placeholder="''" class="ipt" style="width: 70%"/>
      <SettingInput :titleFontSize="18" v-model="data.Port" :title="'Port'" :placeholder="''" class="flex__cont"/>
    </div>
    <p>Available Resource</p>
    <div class="flex">
      <SettingInput :titleFontSize="18" v-model="data.CPUs" :title="'CPUs'" :placeholder="''" class="ipt" style="width: 40%"/>
      <SettingInput :titleFontSize="18" v-model="data.Memories" :title="'Memories'" :placeholder="''" class="ipt" style="width: 40%"/>
      <SettingInput :titleFontSize="18" v-model="data.GPUs" :title="'GPUs'" :placeholder="''" class="flex__cont"/>
    </div>
    <div class="save">
      <n-button>save</n-button>
    </div>
  </div>
</template>

<script setup>
import { NButton } from 'naive-ui'
import SettingInput from '@/components/fsConfig/SettingInput'
import {reactive} from "vue";

let data = reactive({
  'name': '',
  'MasterHost': '',
  'Port': '',
  'CPUs': '',
  'Memories': '',
  'GPUs': '',
})
</script>

<style scoped src="@/style/modelD/dispatcher/modal.css"></style>

